<template>
    <div class="app-container">
        <el-form ref="deptRef" :model="formdata" :rules="formRules" label-width="68">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="formdata.name" placeholder="请输入名称" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="分类">
                        <GoodsClassify :dataInfo="formdata" @successAction="successAction" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="标签">
                        <el-select v-model="formdata.goodsTagRelList" multiple collapse-tags collapse-tags-tooltip
                            placeholder="请选择标签" style="width: 100%">
                            <el-option v-for="item in labelAllData" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="层色" prop="useDeg">
                        <el-input v-model="formdata.useDeg" placeholder="请输入成色" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="商品" prop="warehouseId">
                        <SelectData :echoValue="formdata.warehouseId"
                            @update:successAction="ev => state.formdata.warehouseId = ev" :types="1" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="编号" prop="goodsDocList">
                        <el-input v-model="formdata.goodsDocList" placeholder="请输入名称" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="销售价格" prop="sellPrice">
                        <el-input v-model="formdata.sellPrice" placeholder="请输入名称" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="结算价格" prop="marketPrice">
                        <el-input v-model="formdata.marketPrice" placeholder="请输入名称" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="市场价格" prop="settlePrice">
                        <el-input v-model="formdata.settlePrice" placeholder="请输入名称" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="图片" prop="goodsDocList">
                        <ImageUpload v-model="goodsImgList" @successUpload="successUpload" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="视频" prop="video">
                        <ImageUpload v-model="formdata.video" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="简介 " prop="goodsDes">
                        <editor v-model="formdata.goodsDes" :min-height="192" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="">
                        <el-button type="primary" @click="submitForm()" :loading="isLoading">提交</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
  
<script setup>

import {
    CreateGoods,
    EditGoods,
    GetGoodsDetails, // 详情
} from "@/api/goodsManage/goods"

import {
    getLabelData
} from "@/hooks"
import { onMounted, reactive, toRefs } from "vue";
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'

import GoodsClassify from "@/views/components/goodsClassify/index.vue"
import SelectData from "@/views/components/selectData/index.vue"

const route = useRoute();
const router = useRouter()
const { params, query } = route

let isOpen = ref(false)
let isLoading = ref(false)

const cancel = () => {
    isOpen.value = false
}

const successAction = (ev) => {
    state.formdata.firstClassifyId = ev[0]
    state.formdata.secondClassifyId = ev[1] ? ev[1] : ""
}

const createGoodsFn = async () => {
    console.log(state.formdata)
    try {
        isLoading.value = true
        let data = await CreateGoods(state.formdata)
        isLoading.value = false
        ElMessage.success("新增商品成功！")
        router.go(-1)
    } catch (error) {
        isLoading.value = false

    }
}

const editGoodsFn = async () => {
    try {
        isLoading.value = true
        let data = await EditGoods(state.formdata)
        isLoading.value = false
        ElMessage.success("商品编辑成功！")
        router.go(-1)
    } catch (error) {
        isLoading.value = false
    }
}

const getGoodsDetailsFn = async () => {
    try {
        let data = await GetGoodsDetails(query.id)
        for (let item in state.formdata) {
            state.formdata[item] = data.data[item]
        }
        state.formdata.id = data.data.id
        state.formdata.goodsTagRelList = data.data.goodsTagList.map(o => o.id)
        goodsImgList.value = data.data.goodsDocVoList.map( o => o.img).join(",")
    } catch (error) {

    }
}

let goodsImgList = ref("")

const state = reactive({
    formdata: {
        name: "", // 
        firstClassifyId: "", // 
        secondClassifyId: "", // 
        useDeg: "", // 
        warehouseId: "", // 
        goodsDes: "", // 
        sellPrice: "", // 
        marketPrice: "", // 
        settlePrice: "", // 
        mainImg: "", // 
        video: "", // 
        img: "", // 
        goodsTagRelList: [], // 
        goodsDocList: [],
    },
    formRules: {

    },
    labelAllData: [],
    isView:""
})

const successUpload = () => {
    console.log(goodsImgList.value.split(','), 'goodsDocList.value.split(', ')', goodsImgList.value)
    console.log(state.formdata)
    state.formdata.goodsDocList = goodsImgList.value.split(',').map(o => {
        return {
            img: o
        }
    })
}

const submitForm = () => {
    if (query.id) {
        editGoodsFn()
    } else {
        createGoodsFn()
    }
}

const { formdata, formRules, labelAllData } = toRefs(state)

onMounted(async () => {
    let { returnData: labelDataFn } = getLabelData()
    let labelData = await labelDataFn()
    state.labelAllData = labelData.data
    state.isView = query.view
    if (query.id) {
        state.formdata.id = query.id
        getGoodsDetailsFn()
    }
})
</script>
